<!--
页面名称: customerDetails.vue
页面描述: 该页面为客源详情
开发人员: Vikanong
开发时间: 2018-xx-xx
其他说明: 该页面为客源详情
-->
<template>
  <div class>
    <div class="HomeLease_infoBox" style="padding-right:7px;">
      <div slot="header" class="clearfix">
        <span class="card_title">
          <span v-if="customerType==1">写字楼求租</span>
          <span v-else-if="customerType==2">写字楼求购</span>
          <span v-else-if="customerType==3">住房求租</span>
          <span v-else-if="customerType==4">住房求购</span>
          <span v-else-if="customerType==5">商铺求租</span>
          <span v-else-if="customerType==6">商铺求购</span>
        </span>
        <!-- <span class="signType">{{transactionType=='0'?'售':'租'}}</span> -->
      </div>
      <div class="fontColor1">
        <ul class="parameter_ul">
          <li class="list_background">
            <div class="parameter_l">
              <span class="parameter_span">意向区域：</span>
              <span>{{ $Dictionaries("CityRegion", dataForm.districtCode) }}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">意向楼盘：</span>
              <!-- <span>{{ $Dictionaries("CityRegion", dataForm.districtCode) }}</span> -->
              <span>{{dataForm.dictName}}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">楼层需求：</span>
              <span>{{dataForm.storeys}}-{{dataForm.storeye}} 楼</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">状态：</span>
              <span>{{ $getDictLabel("customerState", dataForm.state) }}</span>
            </div>
          </li>
          <li>
            <div class="parameter_l">
              <span class="parameter_span">需求面积：</span>
              <span>{{dataForm.areas+'㎡'}}-{{dataForm.areae+'㎡'}}</span>
            </div>
            <div class="parameter_r">
              <span class="parameter_span">预算价格：</span>
              <span>{{dataForm.prices}}-{{dataForm.pricee}}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">装修：</span>
              <span>{{ $getDictLabel("dictRenovation",dataForm.renovation)}}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">等级：</span>
              <span>{{dataForm.grade}}</span>
            </div>
          </li>
          <li class="list_background">
            <div class="parameter_l">
              <span class="parameter_span">来源：</span>
              <span>{{ $getDictLabel("customerSource", dataForm.source) }}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">急切：</span>
              <span v-if="dataForm.eager==1">急</span>
              <span v-else>不急</span>
            </div>
            <div
              class="parameter_l"
              v-if="customerType==3||customerType==4||customerType==5||customerType==6"
            >
              <span class="parameter_span">朝向：</span>
              <span>{{$getDictLabel("dictDirection", dataForm.direction)}}</span>
            </div>
            <div class="parameter_l" v-if="customerType==1||customerType==2">
              <span class="parameter_span">格局：</span>
               <span>{{dataForm.apartmentB}}</span>
              <!-- <span>{{dataForm.apartmentB+'办公室 '+dataForm.apartmentG+'工位 '+dataForm.apartmentH +'会议室'}}</span> -->
            </div>

            <div class="parameter_l">
              <span class="parameter_span">职位：</span>
              <span>{{dataForm.position}}</span>
            </div>
          </li>
          <li>
            <div class="parameter_l">
              <span class="parameter_span">入住时间：</span>
              <span>{{dataForm.inTime}}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">沟通阶段：</span>
              <span>{{$getDictLabel("customerCommunication ", dataForm.communication)}}</span>
            </div>
            <div class="parameter_l" v-if="customerType==4||customerType==2">
              <span class="parameter_span">用途：</span>
              <span>{{dataForm.purpose}}</span>
            </div>
            <div class="parameter_l" v-else-if="customerType==3">
              <span class="parameter_span">户型：</span>
              <span>{{dataForm.apartmentS+'室 '+dataForm.apartmentT+'厅 '+dataForm.apartmentW+'卫 '+dataForm.apartmentY+'阳台'}}</span>
            </div>
          </li>
          <li class="list_background">
            <div class="parameter_l">
              <span class="parameter_span">有效期限：</span>
              <span>{{'暂无字段'}}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">委托编号：</span>
              <span>{{'暂无字段'}}</span>
            </div>
            <div class="parameter_l" v-if="customerType==4||customerType==2||customerType==6">
              <span class="parameter_span">购买类型：</span>
              <span>{{$getDictLabel("houseBuyType", dataForm.buyType)}}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">付款方式：</span>
              <span
                v-if="customerType==4||customerType==2||customerType==6"
              >{{$getDictLabel("dictOwnerBuy", dataForm.payType)}}</span>
              <span
                v-if="customerType==3||customerType==1||customerType==5"
              >{{$getDictLabel("dictTenanPay", dataForm.payType)}}</span>
            </div>
          </li>
          <li>
            <div class="parameter_l_a">
              <span class="parameter_span">现办公地址：</span>
              <span>{{dataForm.address}}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">行业：</span>
              <span>{{dataForm.occupation}}</span>
            </div>
            <div class="parameter_l">
              <span class="parameter_span">佣金：</span>
              <span>{{dataForm.commission}}</span>
            </div>
          </li>
          <li class="list_background">
            <div class="parameter_l_a">
              <span class="parameter_span">看房经历：</span>
              <span>{{dataForm.experience}}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="box_shadow" style="margin:20px 5px">
        <span class="card_title">备注：</span>
        <span class="display_i_b" style="margin-left:10px">{{dataForm.remark}}</span>
      </div>
      <div
        class="Follow_main box_shadow"
        style="margin:20px 5px"
        v-if="hasPermission('customer:customerinfo:followPage')"
      >
        <div>
          <span class="card_title">跟进记录</span>
          <span
            class="float_r"
            style="margin:15px;"
            v-if="hasPermission('customer:customerinfo:followSave')"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              plain
              @click="addFollowFun"
            >写跟进</el-button>
          </span>
        </div>
        <div class="Follow_List">
          <ul>
            <li v-for="item in FollowTableData">
              <el-avatar
                :size="45"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-avatar>
              <span class="display_i_b content_text">
                {{item.creatorName}}
                <br />
                {{item.content}}
              </span>
              <span class="float_r date">{{item.createDate }}</span>
            </li>
          </ul>
        </div>
        <el-pagination
          :current-page="page2"
          :page-size="limit2"
          :total="total2"
          layout="total, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle2"
          @current-change="pageCurrentChangeHandle2"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="写跟进" :visible.sync="addFollowVisible" width="30%">
      <el-form ref="form" :model="FollowForm" label-width="50px" label-position="top">
        <el-form-item label="跟进方式">
          <ren-select v-model="FollowForm.type" dict-type="customerFollowType"></ren-select>
        </el-form-item>
        <el-form-item label="跟进内容">
          <el-input v-model="FollowForm.content" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addFollowVisible = false">取 消</el-button>
        <el-button type="primary" @click="FollowFun" :loading="BtnLoading">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customerId: this.$route.query.ID,
      customerType: this.$route.query.customerType,
      dataForm: {},
      AxiosUrl: "",
      FollowTableData: [],
      page2: 1, // 当前页码
      limit2: 5, // 每页数
      total2: 0, // 总条数
      addFollowVisible: false,
      FollowForm: {
        content: "",
        type: "",
        customerId: this.$route.query.ID,
        customerType: this.$route.query.customerType
      },
      BtnLoading: false
      // permissionListDTO:[]
    };
  },
  components: {},
  created() {
    let _this = this;
    this.getAll();
  },
  mounted() {
    let _this = this;
  },
  methods: {
    getAll() {
      if (this.customerId) {
        if (this.customerType == 1) {
          //写租
          this.AxiosUrl = "/customer/customerzxinfo/";
        } else if (this.customerType == 2) {
          //写购
          this.AxiosUrl = "/customer/customermxinfo/";
        } else if (this.customerType == 3) {
          //住租
          this.AxiosUrl = "/customer/customerzzinfo/";
        } else if (this.customerType == 4) {
          //住购
          this.AxiosUrl = "/customer/customermzinfo/";
        } else if (this.customerType == 5) {
          //商租
          this.AxiosUrl = "/customer/customerzsinfo/";
        } else if (this.customerType == 6) {
          //商购
          this.AxiosUrl = "/customer/customermsinfo/";
        }
      }
      this.getCustomerDetails();
      this.getPageFollow();
    },

    //获取客源信息
    getCustomerDetails() {
      this.$http
        .get(this.AxiosUrl + this.customerId)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = res.data;
          this.$emit("MaintainType", res.data.permission);
          this.$emit("CustomerObj", res.data);
        })
        .catch(() => {});
    },
    //写跟进
    addFollowFun() {
      this.FollowForm = {
        content: "",
        type: "",
        customerId: this.$route.query.ID,
        customerType: this.$route.query.customerType
      };
      this.addFollowVisible = true;
    },
    //确定添加跟进
    FollowFun() {
      let _this = this;
      this.$http
        .post("/customer/customerinfo/followSave/", this.FollowForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("添加跟进成功！");
          _this.getPageFollow();
          _this.addFollowVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "添加失败"
          });
        });
    },
    //获取房源跟进记录
    getPageFollow() {
      let _this = this;
      this.$http
        .get(`/customer/customerinfo/followPage`, {
          params: {
            page: _this.page2,
            limit: _this.limit2,
            customerId: _this.customerId,
            customerType: _this.customerType
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.FollowTableData = res.data.list;
          _this.total2 = res.data.total;
        })
        .catch(() => {});
    },
    // 分页, 每页条数
    pageSizeChangeHandle2(val) {
      this.page2 = 1;
      this.limit2 = val;
      this.getPageFollow();
    },
    // 分页, 当前页
    pageCurrentChangeHandle2(val) {
      this.page2 = val;
      this.getPageFollow();
    },
    //判断操作权限
    hasPermission(val) {
      let _this = this;
      let arr = _this.dataForm.permissionListDTO;
      if (arr && arr != []) {
        for (let i = 0; i < arr.length; i++) {
          const element = arr[i];
          if (element.permission.indexOf(val) != -1 && element.state == true) {
            return true;
          }
        }
      } else {
        return false;
      }
    }
  },
  computed: {},
  watch: {
    $route(to, from) {
      if (to.name == "customerPage") {
        this.customerId = this.$route.query.ID;
        this.customerType = this.$route.query.customerType;
        this.getAll();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.card_title {
  line-height: 50px;
  padding-left: 15px;
}
ul,
li {
  list-style: none;
}
ul {
  padding: 0;
}
.parameter_l {
  width: 25%;
  float: left;
  padding-left: 15px;
}
.parameter_r {
  width: 25%;
  float: left;
  padding-left: 15px;
}
.parameter_l_a {
  width: 50%;
  float: left;
  padding-left: 15px;
}
.parameter_ul {
  margin: 0;
}
.parameter_ul li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
}
.list_background {
  background: rgb(248, 248, 248);
}
.Follow_main {
  .Follow_List {
    ul {
      list-style: none;
      max-height: 606px;
      overflow: auto;
      li {
        margin: 0px 20px;
        border-bottom: 1px solid rgb(240, 240, 240);
        padding: 20px 0px;
        .content_text {
          margin-left: 15px;
          line-height: 30px;
          color: rgb(70, 70, 70);
        }
        .date {
          color: rgb(158, 158, 158);
          line-height: 55px;
        }
      }
    }
  }
}
</style>